<template>
  <div class="video body">
    <div class="页眉">
    </div>

    <!--分栏-->
    <el-row :gutter="16" type="flex" justify="center">
      <!--菜单栏-->
      <el-col :span="4">
        <div class="文本框" style="height: 900px;">
          <el-menu  router>
            <el-menu-item index="/CreationCenter" >
              <div class="文本">
                <i class="el-icon-menu"></i>
                首页
              </div>
            </el-menu-item>
            <el-submenu index="001">
              <template slot="title">
                <div class="文本">
                  <i class="el-icon-edit-outline"></i>
                  创作
                </div>
              </template>
              <el-menu-item index="/CreationCenter/SendArticle">发布文章</el-menu-item>
              <el-menu-item index="/CreationCenter/SendVideo">发布视频</el-menu-item>
              <el-menu-item index="/CreationCenter/SendReport">发布研报</el-menu-item>
              <el-menu-item index="/CreationCenter/SendTinyArticle">发布富微条</el-menu-item>
            </el-submenu>
            <el-menu-item index="/CreationCenter/ManageArticle">
              <div class="文本">
                <i class="el-icon-reading"></i>
                作品管理
              </div>
            </el-menu-item>
            <el-submenu index="002">
              <template slot="title">
                <div class="文本">
                  <i class="el-icon-view"></i>
                  互动管理
                </div>
              </template>
              <el-menu-item index="/CreationCenter/ManageFollow">关注管理</el-menu-item>
              <el-menu-item index="/CreationCenter/ManageComment">评论管理</el-menu-item>
              <el-menu-item index="/CreationCenter/ManagePM">私信管理</el-menu-item>
            </el-submenu>
            <el-submenu index="003">
              <template slot="title">
                <div class="文本">
                  <i class="el-icon-document"></i>
                  数据分析
                </div>
              </template>
              <el-menu-item index="/CreationCenter/DataArticle">作品数据</el-menu-item>
              <el-menu-item index="/CreationCenter/DataFans">粉丝数据</el-menu-item>
              <el-menu-item index="/CreationCenter/DataProfit">收益数据</el-menu-item>
            </el-submenu>
            <el-menu-item index="/CreationCenter/Option">
              <div class="文本">
                <i class="el-icon-setting"></i>
                设置
              </div>
            </el-menu-item>
          </el-menu>
        </div>
      </el-col>
      <!--正文栏-->
      <el-col :span="14">
        <div class="文本框">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/CreationCenter' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>发布视频</el-breadcrumb-item>
          </el-breadcrumb>
          <br/>

          <el-tabs v-model="uploadStep" ref="tabs">
            <el-tab-pane label="填写信息" name="1">
              <el-row>
                <el-col :span="4" class="文本-中">标题</el-col>
                <el-col :span="20" class="文本-中">
                  <el-input
                      type="text"
                      placeholder="标题"
                      border="0"
                      v-model="text"
                      maxlength="30"
                      show-word-limit>
                  </el-input>
                </el-col>
              </el-row>
              <el-divider></el-divider>
              <el-row>
                <el-col :span="4" class="文本-中">封面</el-col>
                <el-col :span="20" class="文本-中">
                  <el-upload
                      action="https://jsonplaceholder.typicode.com/posts/"
                      list-type="picture-card"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                </el-col>
              </el-row>
              <el-divider></el-divider>
              <el-row>
                <el-col :span="4" class="文本-中">视频简介</el-col>
                <el-col :span="20" class="文本-中">
                  <el-input
                      type="textarea"
                      :rows="10"
                      placeholder="请输入视频简介"
                      maxlength="500"
                      v-model="textarea">
                  </el-input>
                </el-col>
              </el-row>
              <el-divider></el-divider>
              <el-row>
                <el-col :span="4" class="文本-中">创作类型</el-col>
                <el-col :span="20" class="文本-中">
                  <el-radio-group v-model="radio_2">
                    <el-radio :label="3">原创</el-radio>
                    <el-radio :label="4">转载</el-radio>
                  </el-radio-group>
                </el-col>
              </el-row>
              <el-divider></el-divider>
              <el-row>
                <el-col :span="4" class="文本-中">水印设置</el-col>
                <el-col :span="20" class="文本-中">
                  <el-checkbox v-model="checked">开启水印</el-checkbox>
                </el-col>
              </el-row>
              <br/>
              <div class="居中">
                <el-button type="primary" @click="getUploadsProof">下一步</el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="上传视频" name="2">
              <el-row>
                <el-col :span="4" class="文本-中">视频</el-col>
                <el-col :span="20" class="文本-中">

                  <el-upload
                      :action="uploadAddress"
                      multiple
                      :limit="1"
                      :on-success="handleSuccess"
                      :on-exceed="handleExceed">
                    <el-button size="big" type="primary" @click="getUploadsProof">添加视频</el-button>
                  </el-upload>
                </el-col>
              </el-row>
              <br/>
              <div class="居中">
                <el-button type="primary" @click="changeStep('1')">上一步</el-button>
              </div>
            </el-tab-pane>
          </el-tabs>
          <br/>

          <br/>
          <div class="居中">
            <el-button>预览</el-button>
            <el-button type="primary">发布</el-button>
          </div>










        </div>
      </el-col>
    </el-row>


    <div class="页眉">
    </div>
  </div>
</template>

<style>
.el-input__inner {
  border-radius: 0px;
  font-size: 16px;
}
</style>


<script>




export default {
  data() {
    return {
      uploadStep: '1',
      radio_2: 3,
      checked: true,
      text: '',
      text2: '',
      textarea: '',
      uploadVideoArgs: {
        idUser: window.sessionStorage.getItem("idUser"),
        title:"123",
        fileName:'123.mp4',
        description:"123",
        coverUrl:"none",
        tags:"none",
        userUploadIpAddress:"123",
        videoAuthority:'0',
      },
      uploadAddress:"eyJFbmRwb2ludCI6Imh0dHBzOi8vb3NzLWNuLXNoYW5naGFpLmFsaXl1bmNzLmNvbSIsIkJ1Y2tldCI6Im91dGluLWM2NDE1NGFhM2I5ODExZWI5YWM0MDAxNjNlMWM3NDI2IiwiRmlsZU5hbWUiOiJvcmlnaW5hbC93b3JrZmxvdy80YjY5N2M0Yi0xNzlkYWEzMDFiZi0wMDA0LWY0MzQtMmIwLWFkZGYwLm1wNCJ9",
      videoId:"554647669e534b2184b0085455c68a65",

    }
  },
  created() {
    this.init()
  },
  methods: {
    changeStep(str){
      this.uploadStep=str
    },
    init(){
      this.$nextTick(function () {
        this.$refs.tabs.$children[0].$refs.tabs[0].style.display="none";
      })
      this.$nextTick(function () {
        this.$refs.tabs.$children[0].$refs.tabs[1].style.display="none";
      })
    },
    handleSuccess(res) {
      this.uploadVideoArgs.fileName= res.filename
      console.log(res)
      console.log(this.uploadVideoArgs)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`最多只能上传一个文件`);
    },
    async getUploadsProof() {
      this.changeStep('2')
      const {data: res} = await this.$http.post("http://39.102.77.65:8089/video/uploadalyivideo", this.uploadVideoArgs);
      this.userUploadIpAddress=res.userUploadIpAddress
      this.videoId=res.videoId
      console.log(res)
    }

  }
}
</script>